import React from 'react'
import PropTypes from 'prop-types'

class Comment extends React.Component {
    constructor(props) {
        super(props)
        //初始化state
        this.state = {
            count: props.initCount,
            msg: "hello"
        };
        //绑定this的一种方式
        this.msgChange = this.msgChange.bind(this)
    }

    //默认属性
    static defaultProps = {
        initCount: 0
    }
    //数据校验
    static propTypes = {
        initCount: PropTypes.number
    };



    componentDidMount() {
        console.log("渲染到真实dom后,只执行一次")
        console.log(this.props)
    }

    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     //是否更新页面
    //     return nextState.count % 2 === 0
    // }

    componentDidUpdate(prevProps, prevState, snapshot) {
        //真实dom完成更新
    }

    increase = () => {
        //作用域问题,必须这么定义
        this.setState({count: this.state.count + 1})
    }

    msgChange  (event) {
        this.setState({msg: event.target.value});
    }

    render() {
        return <div>
            <h1>计数器</h1>
            <input type="button" value={"+1"} onClick={this.increase}/>
            <h1 ref="h1">当前数量是{this.state.count}</h1>
            <input type="text" value={this.state.msg} onChange={this.msgChange}/>
        </div>
    }
}


export default Comment
